import type { ICourse } from "@/utils/types";
import {
  PageContainer,
  ProTable,
  type ActionType,
} from "@ant-design/pro-components";
import { getColumns } from "./constants";
import { useCourses } from "@/services/course";
import { Button } from "antd";
import { PlusOutlined } from "@ant-design/icons";
import { useRef, useState } from "react";
import EditCourse from "./component/EditCourse";
import OrderTime from "./component/OrderTime";
import ConsumeCard from "./component/ConsumeCard";

// import style from './index.module.less';

/**
 * 课程管理
 */
const Course = () => {
  const actionRef = useRef<ActionType>(null);
  const { refetch } = useCourses();
  const [showInfo, setShowInfo] = useState(false);
  const [showOrderTime, setShowOrderTime] = useState(false);
  const [showCard, setShowCard] = useState(false);
  const [CurId, setCurId] = useState("");
  const onClickAddHandler = (id?: string) => {
    if (id) {
      setCurId(id);
    } else {
      setCurId("");
    }
    setShowInfo(true);
  };

  const closeAndRefetchHandler = (isReload?: boolean) => {
    setShowInfo(false);
    if (isReload) {
      actionRef.current?.reload();
    }
  };

  const onOrderTimeHandler = (id?: string) => {
    if (id) {
      setCurId(id);
    } else {
      setCurId("");
    }
    setShowOrderTime(true);
  };
  const onCardHandler = (id?: string) => {
    if (id) {
      setCurId(id);
    } else {
      setCurId("");
    }
    setShowCard(true);
  };

  return (
    <PageContainer header={{ title: "当前门店下的课程" }}>
      <ProTable<ICourse>
        rowKey="id"
        actionRef={actionRef}
        columns={getColumns({
          onEditHandler: onClickAddHandler,
          onOrderTimeHandler: onOrderTimeHandler,
          onCardHandler,
        })}
        pagination={{ pageSize: 10 }}
        request={refetch}
        toolBarRender={() => [
          <Button
            type="primary"
            key="add"
            icon={<PlusOutlined />}
            onClick={() => onClickAddHandler()}
          >
            新建
          </Button>,
        ]}
      />
      {/* 为了解决抽屉的多次请求多次渲染所浪费的性能 */}
      {showInfo&&<EditCourse onClose={closeAndRefetchHandler} id={CurId} />}
      {showOrderTime&&<OrderTime onClose={()=>setShowOrderTime(false)} id={CurId} />}
      {showCard&&<ConsumeCard onClose={()=>setShowCard(false)} id={CurId} />}
    </PageContainer>
  );
};

export default Course;
